<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>
    <link rel="stylesheet" href="../css/lzjanniu.css">

</head>
<body>
<div class="container">
    <div class="col-xs-3">
        <div class="input-group">
				<span class="input-group-addon">
					车主姓名：
				</span>
            <input type="text" class="form-control"id="czname">
        </div>
    </div>

    <div class="col-xs-3">
    <div class="input-group">
					<span class="input-group-addon">
						车主手机号：
					</span>
        <input type="text" class="form-control"id="czsjh" placeholder="只可输入数字"maxlength="11"
               onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"
        >
    </div>
</div>

    <div class="col-xs-3">
        <div class="input-group">
					<span class="input-group-addon">
						车牌号：
					</span>
            <input type="text" class="form-control"id="cphm" name="cphm" >

        </div>
    </div>
    <button class="button2"id="zhcx">
        综合查询
    </button>
    <button class="button2 btn-lg" data-toggle="modal" data-target="#myModal" id="tianjia">
        添加
    </button>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">×
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        车辆信息维护
                    </h4>
                </div>
                <div class="modal-body">

                    <table>
                        <tr>
                            <td>住户姓名</td>
                            <td>
                                <select id="zhxm" name="skills" style="height: 25px; width: 70%;">
                                    <option value="luo">请选择</option>
                                    <option value="ke">1</option>
                                    <option value="pang">2</option>
                                </select>

                            </td>
                        </tr>
                        <tr>
                            <td>车位号</td>
                            <td>
                                <select id="cwh" name="skills" style="height: 25px; width: 70%;">
                                    <option value="luo">请选择</option>
                                    <option value="ke">1</option>
                                    <option value="pang">2</option>
                                </select>

                            </td>
                        </tr>
                        <tr>
                            <td>停车卡号：</td>
                            <td>
                                <input type="text" class="form-control " style="height: 25px; width: 70%;" id="tckh"
                                       placeholder="只可输入数字"
                                       onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"
                                >
                            </td>
                        </tr>

                        <tr>
                            <td>手机号：</td>

                            <td>
                                <input id="sjh" type="text" class="form-control"  aria-describedby="basic-addon2" style="height: 25px; width: 70%;"
                                       placeholder="只可输入数字"
                                       onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"
                                >
                            </td>
                        </tr>
                        <tr>
                            <td>车牌号：</td>

                            <td>
                                <input id="cph" type="text" class="form-control"  aria-describedby="basic-addon2"  maxlength="7"  style="height: 25px; width: 70%">

                            </td>
                        </tr>
                        <tr>
                            <td>行驶证号：</td>

                            <td>
                                <input id="xszh" type="text" class="form-control"  aria-describedby="basic-addon2" style="height: 25px; width: 70%;" >
                            </td>
                        </tr>
                    </table>
                </div>

                <div class="modal-footer">

                    <button type="button" class="button2 btn-default"
                            data-dismiss="modal">关闭
                    </button>
                    <button type="button" class=" button2 btn-primary" id="tjcl">
                        提交
                    </button>
                </div>
            </div>
        </div>
    </div>
    <table class="table table-hover table-bordered" id="cltable" style="">
        <tr>
            <td>
                车辆编号
            </td>
            <td>住户编号</td>
            <td>车位编号</td>
            <td>停车卡号</td>
            <td>车主姓名</td>
            <td>车主手机号</td>
            <td>车牌号</td>
            <td>行驶证号</td>
            <td>操作</td>
        </tr>
    </table>
    <div class="modal fade" id="chakanmotai" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true" >
        <div class="modal-dialog" style="width: 800px">
            <div class="modal-content"style="width: 800px">
                <div class="modal-header"style="width: 800px">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">×
                    </button>
                    <h4 class="modal-title" id="myModalLabel1">
                        车位信息查看
                    </h4>
                </div>
                <div class="modal-body" style="width: 800px">
                    <!--车位信息查看模态框-->

                    <table class="table table-hover table-bordered"  id="cwtable">
                        <tr>

                            <td>车位编号</td>
                            <td>所属小区</td>
                            <td>车位类型</td>
                            <td>车位状态</td>
                            <td>车位面积</td>
                            <td>备注</td>
                            <td>收费标准</td>

                        </tr>
                    </table>
                </div>

                <div class="modal-footer" style="width: 800px">

                    <button type="button" class="button2 btn-default"
                            data-dismiss="modal">关闭
                    </button>

                </div>
            </div>
        </div>
    </div>
</div>
<!--删除模态框-->
<div class="modal fade" id="shanchu" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true" >
    <div class="modal-dialog" style="width: 800px">
        <div class="modal-content"style="width: 800px">
            <div class="modal-header"style="width: 800px">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>

            </div>
            <div class="modal-body" style="width: 800px">
                <!--车位信息查看模态框-->
               <h4>确认删除信息吗？</h4>

            </div>

            <div class="modal-footer" style="width: 800px">
                <button type="button" class="button2 btn-default"
                        data-dismiss="modal" id="deleteCl">确认
                </button>
                <button type="button" class="button2 btn-default"
                        data-dismiss="modal">关闭
                </button>

            </div>
        </div>
    </div>
</div>
</div>·
<script type="text/javascript">
    $.ajax({
        url: "addzhuhu",
        type: "get",
        dataType: "json",
        success: function (data) {
            console.log(data);
            console.log("执行了");
            $("#zhxm").empty();//重点1,第一步,把id为ssxqxl的标签置空
            $("#zhxm").append('<option>请选择</option>>')
            $("#cwh").empty();//重点1,第一步,把id为ssxqxl的标签置空
            $("#cwh").append('<option>请选择</option>>')

            for (let i = 0; i < data.length; i++) {
                let zh = data[i];
                // let aid=zh.aid;
                // let htel = zh.htel;
                // let hhname = zh.hhname;
                // let vid = zh.vid;
                // let lid = zh.lid;
                // let uid = zh.uid;
                // let hopenid = zh.hopenid;
                // let hsm = zh.hsm;
                // let num = zh.num;
                // let pass = zh.pass;


                $("#zhxm").append('<option>' + zh.hname +'</option>');






            }

        }
    })

    $.ajax({
        url: "getclxx",
        type: "get",
        dataType: "json",
        success: function (data) {
             console.log(data);
            console.log("执行了");

            for (let i = 0; i < data.length; i++) {
                let cl = data[i];
                let ccid = cl.ccid;
                let aid = cl.aid;
                let carid = cl.pid;
                let stopid = cl.stopid;
                let cname = cl.cname;
                let ctel = cl.ctel;
                let cnumber = cl.cnumber;
                let cxcz = cl.cxcz;
                console.log(aid);


                //创建tr
                let newTr = document.createElement("tr");
                //创建td
                let t1= document.createElement("td");
                // 往td存数据
                $(t1).html(ccid);
                let t2 = document.createElement("td");
                $(t2).html(aid);
                let t3 = document.createElement("td");
                $(t3).html(carid);
                let t4 = document.createElement("td");
                $(t4).html(stopid);

                let t5 = document.createElement("td");
                $(t5).html(cname);
                let t6 = document.createElement("td");
                $(t6).html(ctel);
                let t7 = document.createElement("td");
                $(t7).html(cnumber);
                let t8 = document.createElement("td");
                $(t8).html(cxcz);
                let czTd = document.createElement("td");
                czTd.innerHTML = "<button  class=\"button2\" type=\"button\" data-toggle=\"modal\" data-target=\"#shanchu\" onclick=\"shanchuanniu('" + ccid + "','" + carid + "')\"/>删除</button>"+
                "<button  class=\"button2\" type=\"button\" data-toggle=\"modal\" data-target=\"#chakanmotai\" onclick=\"chakan("+carid+")\"/>查看</button>";

                $(newTr).append(t1);
                $(newTr).append(t2);
                $(newTr).append(t3);
                $(newTr).append(t4);
                $(newTr).append(t5);
                $(newTr).append(t6);
                $(newTr).append(t7);
                $(newTr).append(t8);
                $(newTr).append(czTd);
                //把数据塞入table中
                $("#cltable").append(newTr);

            }

        }
    })
    function zhcx(ccid){
        //发送请求给 后台 完成删除工作
        //1.后端 删除数据
        //2.前端 删展示【拿到后端删除成功的信号】
        $.ajax({
            url:"deleteClxx",
            type:"post",
            data: {"ccid":ccid},
            dataType:"json",//设置响应参数类型
            success:function(data){

                if(data.ok){
                    //在前端进行删除
                    //
                    alert("删除成功");
                    window.location.reload();
                }else{
                    //
                    alert("删除失败");
                }
            }
        });
    }



    /**
     * 给综合查询按钮绑定事件
     */
    $("#zhcx").on("click",function (){
        let czsjh=$("#czsjh").val();
        let czname=$("#czname").val();
        let cphm=$("#cphm").val();
        /**
         * 传值给后台
         */
        //project2
        $.ajax({
            url: "zhcx",
            type: "post",
            dataType: "json",
            data: {czsjh: czsjh,czname:czname,cphm:cphm},
            success: function (data) {
                console.log(data);
                //清楚table旧数据赋值新数据
               $("#cltable tr").not(":first").remove();
                console.log(data);

                for (let i = 0; i < data.length; i++) {
                    let cl = data[i];
                    let ccid = cl.ccid;
                    let aid = cl.aid;
                    let carid = cl.pid;
                    let stopid = cl.stopid;
                    let cname = cl.cname;
                    let ctel = cl.ctel;
                    let cnumber = cl.cnumber;
                    let cxcz = cl.cxcz;
                    console.log(aid);


                    //创建tr
                    let newTr = document.createElement("tr");
                    //创建td
                    let t1= document.createElement("td");
                    // 往td存数据
                    $(t1).html(ccid);
                    let t2 = document.createElement("td");
                    $(t2).html(aid);
                    let t3 = document.createElement("td");
                    $(t3).html(carid);
                    let t4 = document.createElement("td");
                    $(t4).html(stopid);

                    let t5 = document.createElement("td");
                    $(t5).html(cname);
                    let t6 = document.createElement("td");
                    $(t6).html(ctel);
                    let t7 = document.createElement("td");
                    $(t7).html(cnumber);
                    let t8 = document.createElement("td");
                    $(t8).html(cxcz);
                    let czTd = document.createElement("td");
                    czTd.innerHTML =" <button  class=\"button2\" type=\"button\" data-toggle=\"modal\" data-target=\"#shanchu\" onclick=\"shanchuanniu('" + ccid + "','" + carid + "')\"/>删除</button>"+
                        "<button  class=\"button2\" type=\"button\" data-toggle=\"modal\" data-target=\"#chakanmotai\" onclick=\"chakan("+carid+")\"/>查看</button>";

                    /**
                     * 将td塞入tr中
                     */
                    $(newTr).append(t1);
                    $(newTr).append(t2);
                    $(newTr).append(t3);
                    $(newTr).append(t4);
                    $(newTr).append(t5);
                    $(newTr).append(t6);
                    $(newTr).append(t7);
                    $(newTr).append(t8);
                    $(newTr).append(czTd);
                    //把数据塞入table中
                    $("#cltable").append(newTr);

                }


            }
            })
        })
    /**
     * 查看信息，根据pid查询车位信息车辆信息
     */

    function chakan(carid){
        $.ajax({
            url: "chaxuncheliang",
            type: "post",
            dataType: "json",
            data: {pid: carid},
            success: function (data) {
                //控制台打印data
                $("#cwtable tr").not(":first").remove();
                console.log(data);
                for(let i = 0;i < data.length;i++){
                    let cw=data[i];
                    let pid=cw.pid;
                    let vid=cw.vid;
                    let tid=cw.tid;
                    let sid=cw.sid;
                    let vname=cw.vname;
                    let parea=cw.parea;
                    let remark=cw.remark;
                    let caid=cw.caid;

//给所属小区添加下拉框值


                    //创建tr
                    let newTr = document.createElement("tr");
                    let checkbox = document.createElement('td');//创建列



                    let t2 = document.createElement("td");
                    $(t2).html(pid);
                    let t3 = document.createElement("td");
                    $(t3).html(vname);
                    let t4 = document.createElement("td");
                    $(t4).html(tid);

                    let t5 = document.createElement("td");
                    $(t5).html(sid);
                    let t6 = document.createElement("td");
                    $(t6).html(parea);
                    let t7 = document.createElement("td");
                    $(t7).html(remark);
                    let t8 = document.createElement("td");
                    $(t8).html(caid);
                    let czTd = document.createElement("td");




                    $(newTr).append(t2);
                    $(newTr).append(t3);
                    $(newTr).append(t4);
                    $(newTr).append(t5);
                    $(newTr).append(t6);
                    $(newTr).append(t7);
                    $(newTr).append(t8);

                    //把数据塞入table中
                    $("#cwtable").append(newTr);


                    $("#ssxqxl").append('<option>' + vid + '</option>');


                }



            }
        })
    }

    /**
     * 点击添加给车位号下拉框赋值
     * @param carid
     */
    //添加模态

        $.ajax({
            url: "getcw",
            type: "get",
            dataType: "json",
            success: function (data) {
                console.log(data);
//清楚下拉框数据
                $("#cwh").empty();//重点1,第一步,把id为ssxqxl的标签置空
                $("#cwh").append('<option>请选择</option>>')

                for (let i = 0; i < data.length; i++) {
                    let cw = data[i];
                    let pid = cw.pid;
                    let vid = cw.vid;
                    let tid = cw.tid;
                    let sid = cw.sid;

                    let parea = cw.parea;
                    let remark = cw.remark;
                    let caid = cw.caid;
                    if (sid == "占用") {


                    } else {
                        $("#cwh").append('<option>' + cw.pid + '</option>');
                    }


                }
                ;


            }
        })


    /**
     * 删除
     * @param ccid
     */
    function shanchuanniu(ccid,carid){
        $("#deleteCl").click(function () {
            //发送请求给 后台 完成删除工作
            //1.后端 删除数据
            //2.前端 删展示【拿到后端删除成功的信号】
            $.ajax({
                url: "deleteClxx",
                type: "post",
                data: {"ccid": ccid,"carid":carid},
                dataType: "json",//设置响应参数类型
                success: function (data) {


                    if (data.ok) {
                        //在前端进行删除
                        //
                        alert("删除成功");
                        window.location.reload();
                    } else {
                        //
                        alert("删除失败");
                    }
                }
            });
        })
    }



</script>
<script>
    /**
     * 添加信息
     */
    $("#tjcl").on("click",function () {
        let zhxm = $("#zhxm").val();
        let cwh = $("#cwh").val();

        let tckh = $("#tckh").val();
        let czxm = $("#czxm").val();
        let sjh = $("#sjh").val();
        let xszh = $("#xszh").val();
        let cph = $("#cph").val();
        if (tckh.length>0) {

        }
        else {
            alert("停车卡号不能为空");
            return;
        }

        if (sjh.length>0) {

        }else {
            alert("手机号不能为空");
            return;
        }

        if (cph.length>0) {

        }else {
            alert("车牌号不能为空");
            return;
        }
        if (xszh.length>0) {

        }else {
            alert("行驶证号不能为空");
            return;
        }
        if (zhxm=="请选择"){
            alert("住户姓名未选择");
            return
        }
        if (cwh=="请选择"){
            alert("车位号未选择");
            return
        }
        $.ajax({
            url: "tianjiaclxx",
            type: "post",
            dataType: "json",
            data: {"zhxm":zhxm,"cwh":cwh,"tckh":tckh,"sjh":sjh,"xszh":xszh,"cph":cph},
            success:function(data){
                //alert(data);
                if(data.ok){
                    //在前端进行删除//
                    alert("添加成功");
                    window.location.reload();

                }else{
                    //
                    alert("添加失败请重新尝试");

                }
            }
        });








    })

</script>
</body>
</html>